{% extends "page_templates/banner_base.html" %}
{% load facebook_tags %}
{% block game_block %}
	<h4>Explore games created by us and our users!</h4>
	<div id="game_explorer">
		<div class="gamesnav">
			<ul class="gametabs" style="list-style-type:none">
				<li id="t_sports" class="gametablinks" style="float:left; padding-left:10px; cursor:pointer">Team Sports</li>
				<li id="individual" class="gametablinks" style="float:left; padding-left:10px; cursor:pointer">Individual</li>
				<li id="fitness" class="gametablinks"  style="float:left; padding-left:10px; cursor:pointer">Fitness</li>
				<li id="other" class="gametablinks"  style="float:left; padding-left:10px; cursor:pointer">Other</li>
			</ul>
			</br>	
		</div>
		<ul id="t_sports_block" class="team_sports">
			{% for game in team_games %}
				<li><a style="color:black" href="/games/{{ game.name }}/">{{ game.name }}</a></li>	
			{% endfor %}
		</ul>
		<ul id="individual_sports_block" style="display:none">
			{% for game in individual_games %}
				<li><a style="color:black" href="/games/{{ game.name }}/">{{ game.name }}</a></li>	
			{% endfor %}
		</ul>
		<ul id="fitness_sports_block" style="display:none">
			{% for game in fitness_games %}
				<li><a style="color:black" href="/games/{{ game.name }}/">{{ game.name }}</a></li>	
			{% endfor %}
		</ul>
		<ul id="other_sports_block" style="display:none">
			{% for game in other_games %}
				<li><a style="color:black" href="/games/{{ game.name }}/">{{ game.name }}</a></li>	
			{% endfor %}
		</ul>	
	</div>
	</br></br></br>
	{% if logged_in_user %}
		<button id="game_create">Create your own Game!</button>
		<div id="game_form" {% if not game_form_error %}style="display:none"{% endif %}>
			<form action="." method="POST">
			{% csrf_token %}
				<table>
					{{ game_form.as_table }}
				</table>
				<p><input type="submit" value="Create"></p>
			</form>
		</div>
			{% if game_post_success %}
				<h5>Game Created!</h5>	
			{% endif %}
			{% if game_form_error %}
				{% if rules_error %}
					<h5>Please enter only wiki articles for rules</h5>
				{% endif %}
				{% if vid_error %}
					<h5>Please enter only youtube videos for instruction.</h5>
				{% endif %}
			{% endif %}
	{% else %}
		<p>Have a game of your own? Login and Share your competitive spirit!</p>
	{% endif %}
	<script type="text/javascript">
		$('#t_sports').click(function() {
			$('#individual_sports_block').hide()
			$('#fitness_sports_block').hide()
			$('#other_sports_block').hide()
			$('#t_sports_block').show('fast')
		});
		$('#individual').click(function() {
			$('#t_sports_block').hide()
			$('#fitness_sports_block').hide()
			$('#other_sports_block').hide()
			$('#individual_sports_block').show('fast')
		});
		$('#fitness').click(function() {
			$('#t_sports_block').hide()
			$('#individual_sports_block').hide()
			$('#other_sports_block').hide()
			$('#fitness_sports_block').show('fast')
		});
		$('#other').click(function() {
			$('#t_sports_block').hide()
			$('#fitness_sports_block').hide()
			$('#individual_sports_block').hide()
			$('#other_sports_block').show('fast')
		});
		$('#game_create').click(function() {
			$('#game_form').show('fast')
		});
	</script>

{% endblock %}
